<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<body  th:fragment="tpl-data-fetch">
<div id="pager" class="pagerBar"></div>
<script th:src="@{/js/jquery.pager.js}"></script>
<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.0/vue-resource.min.js"></script>
<script>
    layer.load({shade: [0.5, '#000']});
    Vue.use(VueResource);
    Vue.filter('time', function (value) {
        return new Date(value).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    });
    Vue.filter('dict', function (value,dictKey) {
        return dictUtil.getComment(dictKey,value);
    });
    var vue = new Vue({
        el: '.tpl-content-wrapper',
        ready: function () {
            searchFormAction(this);
        },
        beforeDestroy:function(){
            console.log("123");
        },
        methods: {
            //刷新表单
            searchForm: function () {
                searchFormAction(this);
            },
            defaultBtnLinkVue: function(event){
                var thisEl = this;
                event = event ? event : window.event;
                var obj = event.currentTarget ? event.currentTarget : event.target;

                defaultBtnLinkFunction(event,$(obj),function(){searchFormAction(thisEl);},function(){searchFormAction(thisEl);});
            },
            defaultOpenLinkVue:function (event){
                var thisEl = this;
                event = event ? event : window.event;
                var obj = event.currentTarget ? event.currentTarget : event.target;

                defaultOpenLinkFunction(event,$(obj),function(){searchFormAction(thisEl);},function(){searchFormAction(thisEl);});
            }
        },
        data: {
            json: []
        }
    })

    function searchFormAction(vue) {
        var actionUrl = $("#data-form").attr("action");
        var param = $("#data-form").serialize();
        vue.$http.get(actionUrl + "?" + param).then(function (response) {
            vue.$set('json', response.data);
            console.log(response.data);
            initPager(vue,response.data);
            layer.closeAll("loading");
            $(".am-table").css("visibility","visible")
        });

    }


    //页面分页搜索功能
    var page={
        pageNoName:"pageNo",
        pageUrl:'',
        search:function($queryForm,pn,vue){
            console.log(vue);
            $queryForm.find('input[name="page"]').val(pn);
            vue.searchForm();
        },
        initPageBar:function($page,$queryForm,pageOptions,vue){
            var This=this;
            pageOptions.buttonClickCallback=function(pn){
                This.search($queryForm,pn,vue);
            };
            $page.pager(pageOptions);
        },
    };


    function initPager(vue,data){
        var pageOptions = {
            pagenumber:data.page,
            pagecount:data.totalPages,
            totalCount:data.totalElements
        };
        var $queryForm = $("#data-form");//搜索表单
        var $page = $("#pager");//分页条容器
        //分页
        page.initPageBar($page, $queryForm, pageOptions,vue);
    }
</script>
</body>
</html>